<!--
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <span class="lg-range-time">
    <t-time-picker v-model="value0" :placeholder="placeholder[0]" v-bind="timeProps" />
    <span class="lg-range-time-separator">~</span>
    <t-time-picker v-model="value1" :placeholder="placeholder[1]" v-bind="timeProps" />
  </span>
</template>

<script lang="ts" setup>
import { computed, ref, useAttrs, watch } from 'vue';
import { LgRangeTimeProps } from '../types';
import { toStringArray } from '@/soar';

interface Props extends LgRangeTimeProps {
  timeProps?: object;
  parser?(v: any): [string, string];
  formatter?(p: [string, string]): any;
  placeholder?: string | [string, string];
}

const props = defineProps<Props>();
const emits = defineEmits(['change', 'update:modelValue']);

const attrs = useAttrs();
const value0 = ref<string>();
const value1 = ref<string>();
const placeholder = computed(() => toStringArray(props.placeholder ?? ['开始', '结束']));

watch(
  () => attrs.modelValue,
  (v) => {
    const vs = props.parser ? props.parser(v) : v;
    if (vs) {
      // eslint-disable-next-line prefer-destructuring
      value0.value = vs[0];
      // eslint-disable-next-line prefer-destructuring
      value1.value = vs[1];
    }
  },
  { deep: true, immediate: true },
);

watch(() => value0.value, change);
watch(() => value1.value, change);

function change() {
  const v = props.formatter ? props.formatter([value0.value, value1.value]) : [value0.value, value1.value];
  emits('update:modelValue', v);
  emits('change', v);
}
</script>
<script lang="ts">
export default {
  name: 'LgRangeTime',
};
</script>

<style lang="less" scoped>
.lg-range-time {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--td-radius-default);
  border-color: var(--td-border-level-2-color);
  padding: 0 var(--td-comp-paddingLR-s);
  :deep(.t-time-picker) {
    width: calc(50% - 16px);
    .t-input__suffix:not(.t-input__clear) {
      display: none;
    }
    .t-input {
      border: none;
      box-shadow: none;
      padding: 0;
      .t-input__inner {
        text-overflow: unset;
      }
    }
  }
  .lg-range-time-separator {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
